<template>
  <div class="banner container-fuild text-center">REGISTER</div>
  <div id="CompanyIntroduction" class="companyIntroduction">
    <el-form
      ref="ruleFormRef"
      style="max-width: 800px"
      :model="ruleForm"
      status-icon
      :rules="rules"
      label-width="auto"
      class="demo-ruleForm"
    >
      <el-form-item label="Email" prop="email">
        <el-input v-model="ruleForm.email" autocomplete="off" />
        <el-button
          key="primary"
          type="primary"
          text
          link
          @click="getCode()"
        >
          get verification code by email
        </el-button>
      </el-form-item>
      <el-form-item label="code" prop="code">
        <el-input v-model="ruleForm.code" autocomplete="off" />
      </el-form-item>
      <el-form-item label="Nickname" prop="name">
        <el-input v-model="ruleForm.name" autocomplete="off" />
      </el-form-item>
      <el-form-item label="Password" prop="pass">
        <el-input v-model="ruleForm.pass" type="password" autocomplete="off" />
      </el-form-item>
      <el-form-item label="Confirm" prop="checkPass">
        <el-input
          v-model="ruleForm.checkPass"
          type="password"
          autocomplete="off"
        />
      </el-form-item>
      <el-form-item>
        <div style="display: flex; justify-content: center; gap: 10px;">
          <el-button type="primary" @click="submitForm(ruleFormRef)">
            Submit
          </el-button>
          <el-button @click="resetForm(ruleFormRef)">Reset</el-button>
        </div>
      </el-form-item>
    </el-form>

  </div>
</template>

<script lang="ts" setup>
import { h } from 'vue'
import { ElMessage } from 'element-plus'
import { reactive, ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import axios from 'axios'
import ReportApiUrlConfig from '../api/select.ts'
import { routes } from 'vue-router/vue-router-auto-routes'
import { useRouter } from 'vue-router'
const router=useRouter()
const ruleFormRef = ref<FormInstance>()

const checkAge = (rule: any, value: any, callback: any) => {
  if (!value) {
    return callback(new Error('Please input the email/nickname '))
  }
}
const checkCode = (rule: any, value: any, callback: any) => {
  if (!value) {
    return callback(new Error('Please input the email-code'))
  }
}
const open = () => {
  ElMessage.error('please enter a email')
}

const getCode= async ()=>{
  if (ruleForm.email == ''){
    open();
    return;
  }
  const postData =({
    email: ruleForm.email
  });

  try {
    //http://localhost:8080/customer/front/sendCode?email=meiko_ooo@163.com
    const { data } = await axios.get(ReportApiUrlConfig.sendCode+ '?email='+ruleForm.email);
    if (data ==null)  {
      ElMessage.error('send failed');
      return
    }
    ElMessage({
      message: 'send successfully',
      type: 'success',
    })
  } catch (error) {
    ElMessage.error('Oops, this is a error message.')
    console.error("Error fetching product list:", error);
  }
}

const validatePass = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('Please input the password'))
  } else {
    if (ruleForm.checkPass !== '') {
      if (!ruleFormRef.value) return
      ruleFormRef.value.validateField('checkPass')
    }
    callback()
  }
}
const validatePass2 = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('Please input the password again'))
  } else if (value !== ruleForm.pass) {
    callback(new Error("Two inputs don't match!"))
  } else {
    callback()
  }
}

const ruleForm = reactive({
  pass: '',
  checkPass: '',
  age: '',
  email:'',
  name:'',
  code:'',
})

const rules = reactive<FormRules<typeof ruleForm>>({
  pass: [{ validator: validatePass, trigger: 'blur' }],
  checkPass: [{ validator: validatePass2, trigger: 'blur' }],
  email: [{ validator: checkAge, trigger: 'blur' }],
  name: [{ validator: checkAge, trigger: 'blur' }],
  code: [{ validator: checkCode, trigger: 'blur' }],
})

const submitForm =async (formEl: FormInstance | undefined) => {
  const postData =({
    nickName: ruleForm.name,
    rePassword: ruleForm.checkPass,
    email:ruleForm.email,
    password:ruleForm.pass,
    code:ruleForm.code,
  });
  if (!formEl) return
  formEl.validate((valid) => {
    console.log('1')
    console.log(valid)
    if (valid) {
      console.log('submit!')
    } else {
      console.log('error submit!')
    }
  })

  try {
    const { data } = await axios.post(ReportApiUrlConfig.register,postData);
    debugger
    if (!data.data && data.code!=200)  {
      ElMessage.error(data.msg);
      return
    }
    ElMessage({
      message: data.data.nickName+' register successfully',
      type: 'success',
    })
    router.push('/')
  } catch (error) {
    ElMessage.error('Oops, this is a error message.')
    console.error("Error fetching product list:", error);
  }


}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}
</script>

<style scoped>
html {
  scroll-behavior: smooth;
}
.companyIntroduction{
  margin: 50px;
  display: flex;
  flex-direction: column;
  align-content: center;
  justify-content: center;
  align-items: center;
  gap: 20px;
}
.banner {
  color: #fff;
  font-size: 30px;
  height: 150px;
  line-height: 150px;
  background-image: url('../assets/img/banner1.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: scroll;
  background-position: center center;
}
.row {
  margin-right: 0;
  margin-left: 0;
}
.CompanyIntroduction-container {
  padding: 100px 0;
  color: #808080;
  transition: all ease 0.5s;
}
.CompanyIntroduction-container > div > p {
  font-size: 14px;
  line-height: 2.5rem;
}
@media screen and (max-width: 997px) {
  .CompanyIntroduction-container {
    padding: 10px 0;
    color: #808080;
  }
}
</style>

